import React from "react";

import '../style/components/detail-current-weather.scss'

import iconFeelLike from '../assets/imgs/index/noun-rain-color.png'
import iconHumidity from '../assets/imgs/index/noun-humidity-color.png'
import iconWind from '../assets/imgs/index/noun-wind-color.png'


const DetailCurrentWeather = ({onBack, weather, isLoading, isError }) => {
  return (
    <div className="detail-weather">
      <div className="detail-weather-box">
        <div className="detail-weather-back" onClick={onBack}>&#8592;</div>
        <img className="detail-weather-icon" src={weather.weatherIcon}></img>
        <div className="detail-weather-location">杭州市，浙江省</div>
        <div className="detail-weather-content">
          <div className="detail-weather-weather">
            <div className="detail-weather-weather__temperature">
              {weather.temperature}<span>&#8451; </span>
            </div>
          </div>
        </div>
      </div>
      <div className="detail-weather-info">
        <div className="detail-weather-info__item ">
          <img  src={iconFeelLike} /> {weather.feels_like}&#8451;
       
        </div>
        <div className="detail-weather-info__item detail-weather-info__item--humidity">
          <img  src={iconHumidity} />{weather.humidity}% 
        </div>
        <div className="detail-weather-info__item detail-weather-info__item--speed">
          <img  src={iconWind} />{weather.wind_speed}km/h
        </div>
      </div>
    </div>
  );
};

export default DetailCurrentWeather;
